<template>
  <div>
    <div class="activeTop">
      <el-button
        type="primary"
        @click="$router.push({ name: 'addCouponActivity' })"
        >新增优惠券
      </el-button>
      <el-button :disabled="selectList.length === 0" @click="delCoupons"
        >批量删除
      </el-button>
      <el-select
        v-model="getStateValue"
        placeholder="全部状态"
        class="activeTop__sel"
        @change="selectStatus"
      >
        <el-option
          v-for="item in activeStateList"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        v-model="getTypeValue"
        placeholder="全部类型"
        class="activeTop__sel"
        @change="selecType"
      >
        <el-option
          v-for="item in activeTypeList"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="useDateValue"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="margin-left:150px;width:390px"
        @change="searchByInput"
      ></el-date-picker>
    </div>
    <CouponList ref="couponList" @getSelect="getSelect" @subTotal="subTotal" />
    <PageManage
      :pageSize="pageSize"
      :pageNum="pageNum"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></PageManage>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import PageManage from "@/components/PageManage.vue";
import CouponList from "./CouponList.vue";
import DateUtil from "@/store/modules/date";
import {
  couponDetail,
  couponList,
  delCoupons,
  offCoupons,
} from "@/api/couponActivity/coupon";

@Component({
  components: {
    PageManage,
    CouponList,
  },
})
export default class CouponIndex extends Vue {
  @Ref()
  readonly couponList: HTMLFormElement;

  /** 搜索类型 */
  activeStateList = [
    {
      id: "3",
      label: "全部状态",
    },
    {
      id: "0",
      label: "未开始",
    },
    {
      id: "1",
      label: "进行中",
    },
    {
      id: "2",
      label: "已结束",
    },
  ];

  /** 当前选中类型 */
  getStateValue = "";

  /** 搜索活动状态 */
  activeTypeList = [
    {
      id: "5",
      label: "全部类型",
    },
    {
      id: "0",
      label: "无门槛折扣券",
    },
    {
      id: "1",
      label: "无门槛现金券",
    },
    {
      id: "2",
      label: "满折券",
    },
    {
      id: "3",
      label: "满减券",
    },
  ];

  /** 当前选中状态 */
  getTypeValue = "";

  /** 固定时间 */
  useDateValue = "";

  pageSize = 10;

  pageNum = 1;

  total = 0;

  /** 优惠券数组 */
  couponData = [];

  /** 优惠券类型 */
  couponTypeList = ["无门槛折扣券", "无门槛现金券", "折扣券", "满减券"];

  /** 优惠券状态 */
  couponStatusList = ["未开始", "进行中", "已结束"];

  /** 状态颜色显示 */
  couponStatusColorList = ["#333333", "#333333", "#d5d5d5"];

  /** 选择优惠券 */
  selectList = [];

  /** 搜索条件 */
  search = {
    current: 1,
    size: 10,
    couponType: "", // 优惠券类型
    startTime: "", // 开始时间
    endTime: "", // 结束时间
    status: "", // 优惠券状态
    giveType: 0,
  };

  /** 查看结束活动弹窗 */
  endVisible = false;

  /** 选中优惠券 */
  chooseItem = {};

  mounted() {
    this.getCouponList();
  }

  getCouponList() {
    couponList(this.search).then(res => {
      this.couponData = res.data.list;
      this.$emit("subTotal", res.data.total);
    });
  }

  /**
   * 选择优惠券
   */
  handleSelectionChange(val) {
    this.selectList = [];
    val.forEach(item => {
      this.selectList.push(item.id);
    });
    this.$emit("getSelect", this.selectList);
  }

  /**
   * 删除优惠券
   */
  delCoupon(item) {
    this.$confirm("确认删除选中优惠券吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      let ids = [];
      if (item.id) {
        ids.push(item.id);
      } else {
        ids = item;
      }
      delCoupons(ids, {})
        .then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.getCouponList();
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error(err);
          this.getCouponList();
        });
    });
  }

  /**
   * 查看关闭优惠券
   */
  showCoupon(item) {
    this.endVisible = true;
    couponDetail(item.id, {}).then(res => {
      const discountProductVos = res.data.discountProductVos;
      this.chooseItem = { ...res.data.couponVo, discountProductVos };
    });
  }

  /**
   * 关闭优惠券
   */
  offCoupon(item) {
    this.$confirm("确认关闭选中优惠券吗？关闭后无法恢复", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      let ids = [];
      if (item.id) {
        ids.push(item.id);
      } else {
        ids = item;
      }
      offCoupons(2, ids).then(res => {
        if (res.code === 200) {
          this.$message.success("关闭成功");
          this.getCouponList();
        }
      });
    });
  }

  /**
   * 编辑优惠券
   */
  editCoupon(item) {
    this.$router.push({ name: "addCouponActivity", params: { id: item.id } });
  }

  /**
   * 根据时间搜索
   */
  searchByInput(e) {
    this.pageNum = this.couponList.search.current = 1
    this.couponList.search.startTime = this.useDateValue
      ? new DateUtil("").getYMDs(e[0])
      : "";
    this.couponList.search.endTime = this.useDateValue
      ? new DateUtil("").getYMDs(e[1])
      : "";
    this.couponList.getCouponList();
  }

  /**
   * 选择优惠券状态
   */
  selectStatus(e) {
    this.pageNum = this.couponList.search.current = 1
    this.couponList.search.status = e !== "3" ? e : "";
    this.couponList.getCouponList();
  }

  /**
   * 选择优惠券类型
   */
  selecType(e) {
    this.pageNum = this.couponList.search.current = 1
    this.couponList.search.couponType = e !== "5" ? e : "";
    this.couponList.getCouponList();
  }

  /** 子组件选择优惠券 */
  getSelect(itemList) {
    this.selectList = itemList;
  }

  /**
   * 批量删除优惠券
   */
  delCoupons() {
    this.couponList.delCoupon(this.selectList);
  }

  /**
   * 获取总数
   */
  subTotal(total) {
    this.total = total;
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.pageNum = this.couponList.search.current = 1
    this.pageSize = this.couponList.search.size = val;
    this.couponList.getCouponList();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.pageNum = this.couponList.search.current = val;
    this.couponList.getCouponList();
  }
}
</script>

<style lang="scss" scoped>
.activeTop {
  display: flex;

  &__sel {
    margin-left: 10px;
    width: 120px;
  }
}

.serachBtn {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdfe6;
  background-color: white;
  cursor: pointer;
  border-left: none;
  border-radius: 4px;
}
</style>
